<template>
  <div>
    <el-form
      slot:default
      :model="form"
      :rules="rules"
      label-width="100px"
      ref="form"
      class="kylin-form"
    >
      <el-form-item :label="$t('system.batch_name')" prop="name">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item :label="$t('description')" prop="description">
        <el-input v-model="form.description" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">{{ $t("cancel") }}</el-button>
      <el-button class="kylin-button" @click="handleOk">{{
        $t("confirm")
      }}</el-button>
    </div>
  </div>
</template>

<script>
import { markBatch, markBatchByLog } from "@/api/batch";
export default {
  props: {
    ids: {
      type: Array,
      default: function () {
        return [];
      },
    },
    ips: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      form: {
        name: "",
        description: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: this.$t("system.batch_name_require"),
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    handleCancel() {
      this.$refs.form.resetFields();
      this.$emit("click");
    },
    handleOk() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.ips.length > 0) {
            markBatchByLog({ ips: this.ips, ...this.form }).then((res) => {
              if (res.data.code == "0") {
                this.$refs.form.resetFields();
                this.$emit("click");
                this.$message({
                  type: "success",
                  message: res.data.message,
                });
                this.$router.push({
                  name: "host_batch",
                });
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            });
          } else {
            markBatch({ ids: this.ids, ...this.form }).then((res) => {
              if (res.data.code == "0") {
                this.$refs.form.resetFields();
                this.$emit("click");
                this.$message({
                  type: "success",
                  message: res.data.message,
                });
                this.$router.push({
                  name: "host_batch",
                });
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            });
          }
        }
      });
    },
  },
};
</script>